<template>
  <el-aside class="side-bar">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
    >
      <el-sub-menu
        :index="index + ''"
        v-for="(item, index) in getMenu"
        :key="index"
      >
        <template #title>
          <span>{{ item.menuName }}</span>
        </template>
        <el-menu-item
          :index="childrdn.path"
          v-for="(childrdn, indexj) in item.children"
          :key="indexj"
        >
          {{ childrdn.menuName }}
        </el-menu-item>
        <!-- <el-menu-item index="1">Option 1</el-menu-item>
        <el-menu-item index="2">Option 1</el-menu-item> -->
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "SideBarComponent",
  computed: {
    // menu() {
    //   //return this.$store.getter.getMenu();
    // },
    ...mapGetters(["getMenu"]),
  },
};
</script>

<style>
@import url("../assets/css/reset.css");
.side-bar {
  display: block;
  position: relative;
  width: 300px;
  height: 100%;
  background: #545c64;
}
</style>